<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <!--引入外部文件  -->
    <%@include file="/WEB-INF/head.jsp" %>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/employee.js"></script>
</head>
<body>
<!--做添加的框    closed: true 一开始这个框是关闭的状态-->
<div id="editDlg" class="easyui-dialog" title="My Dialog" style="padding:10px"
     data-options="iconCls:'icon-save',resizable:true,modal:true,closed: true, shadow:false">
    <form id="addForm" method="post" enctype="multipart/form-data">
        <!--使用隐藏域防止数据丢失  -->
        <input type="hidden" name="id" id="employeeId"/>
        <table cellpadding="5">
            <tr>
                <td>姓名:</td>
                <td><input class="easyui-validatebox" id="username"
                           validType="checkUserName"
                           name="username" type="text" data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td><input class="easyui-validatebox"
                           type="text" name="email" id="email"
                           data-options="required:true,validType:'email'"></input></td>
            </tr>
            <tr>
                <td>头像:</td>
                <td><input class="easyui-validatebox"
                           id="pic" name="file"
                           type="file" data-options="required:true"/></td>
            </tr>
            <!--date-save="true" 这是一个假的属性，编的  -->
            <tr date-save="true">
                <td>密码:</td>
                <td><input class="easyui-validatebox"
                           id="password" name="password"
                           type="text" data-options="required:true"></input></td>
            </tr>
            <tr date-save="true">
                <td>再次输入密码：</td>
                <td><input class="easyui-validatebox"
                           validType="equals['password','id']" id="password2"
                           type="text" data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><input class="easyui-validatebox" id="age"
                           validType="integerRange[18,60]" name="age"
                           data-options="multiline:true"></input></td>
            </tr>
            <tr>
                <td>部门:</td>
                <td>
                    <input id="cc" class="easyui-combobox" name="departmentId"
                           data-options="panelHeight:'auto',valueField:'id',textField:'name',
	   				 	url:'/department/selectAll'"/>
                </td>
            </tr>
        </table>
    </form>
    <div style="text-align:center;padding:5px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-method="save" style="width:80px">Submit</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#editDlg').dialog('close')"
           style="width:80px">Clear</a>
    </div>
</div>

<div id="tb" style="padding:5px;height:auto">
    <div style="margin-bottom:5px">
        <a href="javascript:;" data-method="add" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
        <a href="javascript:;" data-method="edit" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
        <a href="javascript:;" data-method="remove" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
        <a href="javascript:;" data-method="import" class="easyui-linkbutton" iconCls="icon-save" plain="true">导入</a>
        <form action="#" style="display: none;" id="importForm" enctype="multipart/form-data" method="post">
            <input type="file" name="file" style="display: none;" id="importInput">
        </form>
    </div>
    <form action="#" id="searchForm" method="post">
        <div>
            姓名: <input name="username" class="easyui-textbox" style="width:80px">
            邮箱: <input name="email" class="easyui-textbox" style="width:80px">
            部门: <!-- 应该是从数据库中找的  textField:'name' 需要展示的属性 -->
            <input id="cc" class="easyui-combobox" name="departmentId"
                   data-options="panelHeight:'auto',valueField:'id',textField:'name',url:'/department/selectAll'"/>
            <a href="javascript:;" data-method="search" class="easyui-linkbutton" iconCls="icon-search">Search</a>
        </div>
    </form>
</div>


<!--pagination:true   显示分页的内容  -->
<table id="employeeGrid" class="easyui-datagrid" fit="true"
       data-options="
       url:'/employee/page',
       fitColumns:true,
       singleSelect:true,
       pagination:true,
       toolbar:'#tb'
    ">
    <thead>
    <tr>

        <th data-options="field:'username',width:100">名称</th>
        <th data-options="field:'password',width:100">密码</th>
        <th data-options="field:'email',width:100,align:'right'">邮箱</th>
        <th data-options="field:'age',width:100,align:'right'">年龄</th>
        <th data-options="field:'headimage',width:100,align:'right',formatter:imageMatter">头像</th>
        <th data-options="field:'department',width:100,align:'right',formatter:depMatter">部门</th>
        <th data-options="field:'departmentId'" hidden="true">部门</th>
    </tr>
    </thead>
</table>


</body>
</html>
